<template>
  <el-skeleton :loading="loading" animated>
    <template #template>
      <div v-for="o in 4" :key="o">
        <el-skeleton-item
          variant="image"
          style="width: 400px; height: 267px; float: left"
        />
        <div style="padding: 14px; float: left">
          <el-skeleton-item variant="h3" style="width: 50%" />
          <div
            style="
              display: flex;
              align-items: center;
              justify-items: space-between;
              margin-top: 16px;
              height: 16px;
              width: 500px;
            "
          ></div>
          <el-skeleton :rows="5" />
        </div>
      </div>
    </template>
    <template #default>
      <div>
        <el-scrollbar height="530px">
          <el-card
            shadow="always"
            v-for="(item, index) in state.url"
            :key="item"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <video controls :src="item"></video>
              </el-col>

              <el-col :span="12" v-loading="loadingBox">
                <el-scrollbar>
                  <h4>歌名:{{ this.$store.state.mvName[index] }}</h4>
                  <h6>mv评论</h6>
                  <div
                    class="pin"
                    v-for="comment in state.comment[index]"
                    :key="comment"
                  >
                    <div class="left">
                      <img :src="comment.user.avatarUrl" alt="" />
                      <span>
                        <div class="zhe">
                          评论者:{{ comment.user.nickname }}
                        </div>
                        <div>评论时间:{{ comment.timeStr }}</div>
                      </span>
                    </div>
                    <span class="lun">{{ comment.content }}</span>
                  </div>
                </el-scrollbar>
              </el-col>
            </el-row>
          </el-card>
        </el-scrollbar>
      </div>
    </template>
  </el-skeleton>
</template>

<script>
import { onMounted, reactive, getCurrentInstance } from "@vue/runtime-core";
import { mapState, useStore } from "vuex";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      loading: true,
      description: true,
      loadingBox:true
    };
  },
  computed:{
    ...mapState(['mvComment'])
  },
  setup(mvComment) {
    const store = useStore();
    const state = reactive({
      url: [],
      comment: [],
    });
    onMounted(() => {
      let dataS = getCurrentInstance().data;
      store.dispatch("getRecommendMv");
      state.url = store.state.mvData;
      state.comment = store.state.mvComment;
      if (isNaN(store.state.mvComment[length])) {
        dataS.loading = false;
      }
      dataS.loadingBox = false
    });
    return { state };
  }
};
</script>

<style lang="less" scoped>
.el-scrollbar {
  .el-card {
    margin-bottom: 30px;
    .el-row {
      .el-col {
        border-radius: 4px;
        overflow: auto;
        height: 300px;
        &:first-child {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        &:last-child {
        }
        h4 {
          margin: 10px 0;
        }
        h6 {
          margin: 5px 0;
        }
        .pin {
          display: block;
          width: 458px;
          height: 39px;
          margin-top: 5px;
          border-bottom: 1px solid #cccc;
          .left {
            img {
              float: left;
              height: 30px;
              width: 30px;
              border-radius: 50%;
            }
            span {
              float: left;
              margin-left: 5px;
              div {
                font-size: 12px;
                &:first-child {
                  width: 130px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }
          }
          .lun {
            display: block;
            float: left;
            margin-left: 10px;
            padding-top: 5px;
            width: 258px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        video {
          height: 266px;
          width: 474px;
        }
      }
    }
  }
}
</style>
